<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		
		<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		  <div class="layui-form-item">
		    <label class="layui-form-label">姓名</label>
		    <div class="layui-input-inline">
		      <input type="text" name="stu_name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
		    </div>
			
			<label class="layui-form-label">性别</label>
			<div class="layui-input-inline">
			  <input type="text" name="sex" placeholder="请输入性别" autocomplete="off" class="layui-input">
			</div>
			
			<label class="layui-form-label">班级</label>
			<div class="layui-input-inline">
			  <select class="type" name="class_id" lay-filter="aihao">
			    <option value="">请选择</option>
			  </select>
			</div>
			
			<div class="layui-input-inline">
			  <button class="layui-btn" lay-submit lay-filter="search">立即提交</button>
			</div>
		  </div>
		  
		  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
		<script>
		layui.use(['form','table','jquery'], function(){
		  var form = layui.form;
		  var table = layui.table;
		  var $ = layui.jquery;
		  
		  //加载班级类型
		  //加载类别
		  $.post(
		  			"clazz/findAll.do",
		  			function(res){
		  				for(var i=0;i<res.length;i++){
		  					var str = "<option value='"+res[i].class_id+"'>"+res[i].classname+"</option>";
		  					$(".type").append($(str));
		  					form.render();
		  				}
		  			},"json"
		  );
		  //各种基于事件的操作，下面会有进一步介绍
		  form.on('submit(search)', function(data){
		    // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		    // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		    // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			table.reload('demo', {
			  where: data.field //设定异步数据接口的额外参数
			  //,height: 300
			});
		    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		  });
		  
		  
		});
		</script>
		
		<table id="demo" lay-filter="test"></table>
		 
		<script>
		layui.use(['table','jquery','form'], function(){
		  var table = layui.table;
		  var form = layui.form;
		  var $ = layui.jquery;
		  //第一个实例
		  table.render({
		    elem: '#demo'
			,toolbar: '#toolbarDemo'
		    ,height: 400,
			limits:[5,10,15,20,25]
		    ,url: 'students/findAll.do' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'stu_id', title: 'ID'}
		      ,{field: 'stu_name', title: '真实姓名'}
		      ,{field: 'sex', title: '性别'}
		      ,{field: 'mtel', title: '手机号'} 
		      ,{field: 'qq', title: 'qq号'}
		      ,{field: 'birthday', title: '生日'}
		      ,{field: '', title: '班级',templet:function(d){
				  return d.clazz.classname;
			  }}
		    ]]
		  });
		  
		  //监听事件
		  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'add':
		       layer.open({
		         type: 1,
				 title:["添加学生"],
				 area:['550px','600px'],
		         content: $('#addForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		       });
		      break;
		      case 'delete':
		        layer.msg('删除');
		      break;
		      case 'update':
		        layer.msg('编辑');
		      break;
		    };
		  });
		  
		});
		</script>
		
	</body>
</html>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
  </div>
</script>

<form class="layui-form" id="addForm" style="display: none;"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		  <div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
				  <input type="text" name="stu_name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
				</div>
		  </div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">班级</label>
				<div class="layui-input-inline">
				  <select class="type" name="class_id" lay-verify="required" lay-filter="aihao">
					<option value="">请选择</option>
				  </select>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-inline">
				  <input type="text" name="sex" placeholder="请输入性别" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">QQ</label>
				<div class="layui-input-inline">
				  <input type="text" name="qq" placeholder="请输入QQ" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-inline">
				  <input type="text" name="mtel" lay-verify="required|phone|number" placeholder="请输入电话" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">生日</label>
				<div class="layui-input-inline">
				  <input type="text" name="birthday" lay-verify="required|date" placeholder="请输入生日" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			
		  
		  
		  <div class="layui-form-item">
		    <div class="layui-input-block">
		      <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
		    </div>
		  </div>
		  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
		</form>
		<script>
		layui.use(['form','table','jquery'], function(){
		  var form = layui.form;
		  var table = layui.table;
		  var $ = layui.jquery;
		  
		  //加载班级类型
		  
		  //各种基于事件的操作，下面会有进一步介绍
		  form.on('submit(add)', function(data){
		    // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
		    // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
		    // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			$.post(
				"students/add.do",
				data.field,
				function(res){
					//表格重载
					table.reload('demo');
					//关闭弹出层
					layer.close(layer.index);
					layer.msg('添加成功');
					}
			);
		    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		  });
		  
		  
		});
		</script>
